@use '../../_styles/mixin.scss' as *;

.o-table {
  @include respond-to('<=pad') {
    --table-radius: var(--o-radius_control-s);
  }

  @include respond-to('laptop') {
    --table-text-size: var(--o-font_size-tip1);
    --table-text-height: var(--o-line_height-tip1);

    --table-head-cell-height: 40px;
    --table-cell-height: 48px;

    --table-head-cell-padding: 8px 12px;
    --table-cell-padding: 12px 12px;

    --table-edge-padding: 24px;
  }
  @include respond-to('pad') {
    --table-text-size: var(--o-font_size-tip1);
    --table-text-height: var(--o-line_height-tip1);

    --table-head-cell-height: 40px;
    --table-cell-height: 48px;

    --table-head-cell-padding: 8px 8px;
    --table-cell-padding: 8px 8px;

    --table-edge-padding: 16px;
  }
  @include respond-to('phone') {
    --table-text-size: var(--o-font_size-tip2);
    --table-text-height: var(--o-line_height-tip2);

    --table-head-cell-height: 32px;
    --table-cell-height: 32px;

    --table-head-cell-padding: 8px 8px;
    --table-cell-padding: 8px 8px;

    --table-edge-padding: 12px;
  }
}
.o-table-small {
  @include respond-to('<=pad') {
    --table-radius: var(--o-radius_control-s);
  }

  @include respond-to('laptop') {
    --table-text-size: var(--o-font_size-tip1);
    --table-text-height: var(--o-line_height-tip1);

    --table-head-cell-height: 32px;
    --table-cell-height: 40px;

    --table-head-cell-padding: 5px 8px;
    --table-cell-padding: 8px 8px;

    --table-edge-padding: 24px;
  }

  @include respond-to('pad') {
    --table-text-size: var(--o-font_size-tip1);
    --table-text-height: var(--o-line_height-tip1);

    --table-head-cell-height: 32px;
    --table-cell-height: 40px;

    --table-head-cell-padding: 5px 8px;
    --table-cell-padding: 5px 8px;

    --table-edge-padding: 16px;
  }

  @include respond-to('phone') {
    --table-text-size: var(--o-font_size-tip2);
    --table-text-height: var(--o-line_height-tip2);

    --table-head-cell-height: 32px;
    --table-cell-height: 32px;

    --table-head-cell-padding: 7px 8px;
    --table-cell-padding: 7px 8px;

    --table-edge-padding: 12px;
  }
}
